.card {
  width: 100%
  margin: 20px auto
  max-width: 500px
}

.author {
  display: flex
  justify-content: center
  align-items: center
  flex-wrap: wrap
  gap: 15px
}

.author-info {
  display: flex
  flex-direction: column
}

.name {
  font-size: 1.5rem
  margin-bottom: 5px
  text-shadow: 0.25rem 0.25rem 0.5rem rgb(1, 162, 190)
  
  h2 {
    margin: 0
    line-height: 1.2
  }
}

.avatar-container {
  width: 100px
  height: 100px
  border-radius: 50%
  overflow: hidden
  border: 2px solid rgba(1, 162, 190, 0.5)
  box-shadow: 0 0 15px rgba(1, 162, 190, 0.2)
  flex-shrink: 0
}

.avatar {
  display: block
  width: 100%
  height: 100%
  object-fit: cover
  transition: transform 0.6s ease
}

.avatar-container:hover .avatar {
  transform: rotate(360deg) scale(1.05)
  box-shadow: 0 0 20px rgba(1, 162, 190, 0.4)
}

.avatar-container:not(:hover) .avatar {
  transition: transform 0.8s ease
  transform: rotate(0deg)
}

/* 响应式样式调整 */
@media (max-width: 1024px) {
  .card {
    max-width: 450px
  }

  .avatar-container {
    width: 90px
    height: 90px
  }
  
  .name {
    font-size: 1.4rem
  }
}

@media (max-width: 900px) {
  .card {
    max-width: 400px
  }
  
  .avatar-container {
    width: 80px
    height: 80px
  }
}

@media (max-width: 768px) {
  .card {
    margin: 15px auto
    max-width: 350px
  }
  
  .author {
    justify-content: center
  }
  
  .name {
    font-size: 1.3rem
  }
}

/* 确保在小屏幕上也能显示 */
@media (max-width: 480px) {
  .card {
    max-width: 100%
    margin: 10px auto
  }
  
  .author {
    flex-direction: row
    justify-content: center
    text-align: center
    gap: 10px
  }
  
  .avatar-container {
    width: 70px
    height: 70px
  }
  
  .name {
    font-size: 1.2rem
  }
}

/* 处理超窄屏幕，确保内容能完全展示 */
@media (max-width: 360px) {
  .author {
    flex-direction: column
    align-items: center
  }
  
  .author-info {
    align-items: center
    text-align: center
  }
}